<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/skeleton.css" />
    <title>Shark DAO</title>
    <style>
      .center {
        /*height: 100vh;*/
        /*width: 100%;*/
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #eee;
      }

      .wave {
        width: 5px;
        height: 3rem;
        background: rgb(205, 223, 247);
        margin: 10px;
        animation: wave 1s linear infinite;
        border-radius: 20px;
      }

      .wave:nth-child(2) {
        animation-delay: 0.1s;
      }

      .wave:nth-child(3) {
        animation-delay: 0.2s;
      }

      .wave:nth-child(4) {
        animation-delay: 0.3s;
      }

      .wave:nth-child(5) {
        animation-delay: 0.4s;
      }

      .wave:nth-child(6) {
        animation-delay: 0.5s;
      }

      .wave:nth-child(7) {
        animation-delay: 0.6s;
      }

      .wave:nth-child(8) {
        animation-delay: 0.7s;
      }

      .wave:nth-child(9) {
        animation-delay: 0.8s;
      }

      .wave:nth-child(10) {
        animation-delay: 0.9s;
      }

      @keyframes wave {
        0% {
          transform: scale(0);
        }

        50% {
          transform: scale(1);
        }

        100% {
          transform: scale(0);
        }
      }
    </style>
    <!-- <script src="https://telegram.org/js/telegram-widget.js" type="text/javascript"></script> -->

    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
      var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
      (function () {
        var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
        s1.async = true;
        s1.src = 'https://embed.tawk.to/62b6a95f7b967b1179966d43/1g6cob7ur';
        s1.charset = 'UTF-8';
        s1.id = 'tawk'
        s1.setAttribute('crossorigin', '*');
        s0.parentNode.insertBefore(s1, s0);
      })();
    </script>
    <!--End of Tawk.to Script-->

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9QSBWYJ67L"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag () {dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-9QSBWYJ67L');
    </script>

    <!--    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
    <!--    <script>-->
    <!--      // VConsole 默认会挂载到 `window.VConsole` 上-->
    <!--      var vConsole = new window.VConsole();-->
    <!--    </script>-->
  </head>

  <body>
    <div id="app">
      <!--   <div-->
      <!--      class="ssc-card ssc-wrapper flex justify-between"-->
      <!--      style="flex-direction: row;"-->
      <!--    >-->
      <!--      <div class="ssc-head-line mbs" style="width: 10%;"></div>-->
      <!--      <div class="flex" style="flex-direction: row;display: inline;">-->
      <!--        <div class="ssc-square mb inline-flex" style="width: 40%;height: 20px;"></div>-->
      <!--        <div class="ssc-circle mb"></div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <br />-->
      <!--    <br />-->

      <!--    <div class="ssc-card ssc-wrapper flex justify-center align-center">-->
      <!--      <div class="ssc-line w-20 mb"></div>-->
      <!--      <div class="ssc-line w-30 mb"></div>-->
      <!--      <div class="ssc-line w-50 mb"></div>-->
      <!--      <div class="flex align-center">-->
      <!--        <div class="ssc-line w-10 mb mr-10"></div>-->
      <!--        <div class="ssc-line w-10 mb"></div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <br />-->
      <!--    <br />-->
      <!--    <div class="ssc-card ssc-wrapper">-->
      <!--      <div class="ssc-line w-30 mb"></div>-->
      <!--      <br />-->
      <!--      <div class="flex align-start justify-between">-->
      <!--        <div class="w-30">-->
      <!--          <div class="ssc-head-line mb"></div>-->
      <!--          <div class="ssc-line w-80 mb"></div>-->
      <!--          <div class="ssc-line w-40 mb"></div>-->
      <!--          <div class="ssc-line w-60 mb"></div>-->
      <!--        </div>-->
      <!--        <div class="w-30">-->
      <!--          <div class="ssc-head-line mb"></div>-->
      <!--          <div class="ssc-line w-80 mb"></div>-->
      <!--          <div class="ssc-line w-40 mb"></div>-->
      <!--          <div class="ssc-line w-60 mb"></div>-->
      <!--        </div>-->
      <!--        <div class="w-30">-->
      <!--          <div class="ssc-head-line mb mb"></div>-->
      <!--          <div class="ssc-line w-80 mb"></div>-->
      <!--          <div class="ssc-line w-40 mb"></div>-->
      <!--          <div class="ssc-line w-60 mb"></div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
      <!--    <br />-->
      <!--    <br />-->
      <!--    <div class="ssc-card ssc-wrapper">-->
      <!--      <div class="ssc-circle w-20 mb"></div>-->
      <!--      <div class="ssc-line w-30 mb"></div>-->
      <!--      <div class="ssc-line w-20 mb"></div>-->
      <!--      <div class="ssc-line w-20 mb"></div>-->
      <!--    </div>-->
      <!--    <br />-->
      <!--    <br />-->
      <!--    <div class="ssc-card ssc-wrapper">-->
      <!--      <div class="ssc-line w-10 mb"></div>-->
      <!--      <div class="ssc-line w-30 mb"></div>-->
      <!--      <div class="ssc-line w-10 mb"></div>-->
      <!--    </div>-->

      <div class="center">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>

</html>
